<script lang="ts" setup>
import { ref } from 'vue'

import type { Projects } from '@/common/types/projects'
import { getUserActivityService, getUserDynamicService, getUserProjectsService } from '@/common/service/users'
import type { Activity } from '@/common/types/activity'
import type { Dynamic } from '@/common/types/dynamic'
import { PagePath, PageTitle } from '@/common/constants'

// const project: ProjectDetail = { /** 项目id */
//   id: 1,
//   /** 项目图片url */
//   imgUrl: '/static/image.png',
//   /** 项目名称 */
//   projectName: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
//   /** 项目简介 */
//   brief: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
//   /** 项目实施计划 */
//   implementationPlan: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
//   /** 项目简介 markdown格式 */
//   projectDescMd: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
//   /** 项目状态 0：未开始，1：进行中，2：已完成 */
//   status: 1,
//   /** 项目创建时间 */
//   createTime: '111',
//   /** 目标金额 */
//   targetAmout: 1111,
//   /** 已筹集金额 */
//   raisedAmout: 111,
// }

// const activity = ref({
//   /** 活动id */
//   id: 1,
//   /** 活动简介 */
//   activityName: '巧克力中的“爱马仕”，让自己站在今年情人节票圈的顶端',
//   /** 活动简介 */
//   brief: '巧克力中的“爱马仕”，让自己站在今年情人节票圈的顶端',
//   /** 所需志愿者人数 */
//   requireVolunteers: 999,
//   /** 活动状态 */
//   status: ActivityStatusEnum.INPROGRESS,
// })

const { contentAreaHeight, safeBottom } = useLayoutInfo()

/** 用户捐款的项目 */
const projects = ref<Projects[]>()
/** 用户参与的志愿者活动 */
const activity = ref<Activity[]>()
/** 用户发布的动态 */
const dynamic = ref<Dynamic[]>()

/**
 * 获取用户参与的项目
 */
const getUserProjects = async () => {
  const { data } = await getUserProjectsService()
  projects.value = data
  console.log(`project:${data}`)
}

/**
 * 获取用户参与的活动
 */
const getUserActivity = async () => {
  const { data } = await getUserActivityService()
  activity.value = data
  console.log(`activity:${data}`)
}

/**
 * 获取用户发布的动态
 */
const getUserDynamic = async () => {
  const { data } = await getUserDynamicService()
  dynamic.value = data
  console.log(`dynamic:${data}`)
}

/** 页面标题 */
const pageTitle = ref()

/** 列表类型 */
const listType = ref<'dynamic' | 'projects' | 'activity'>('projects')

onLoad((options) => {
  if (!options)
    return

  listType.value = options.type

  console.log(`listType:${listType.value}`)

  // 根据type获取对应数据
  switch (options.type) {
    case 'dynamic':
      getUserDynamic()
      pageTitle.value = PageTitle.MY_DYNAMIC
      break

    case 'projects':
      getUserProjects()
      pageTitle.value = PageTitle.MY_PROJECT
      break

    case 'activity':
      getUserActivity()
      pageTitle.value = PageTitle.MY_ACTIVITY
      break
  }
})
</script>

<template>
  <view class="my-list-container">
    <hope-nav-bar :title="pageTitle" is-back-icon />
    <view
      class="my-list-scroll-container" :style="{
        height: `${contentAreaHeight}px`,
        paddingBottom: `${safeBottom}px`,
      }"
    >
      <scroll-view scroll-y class="my-list-scroll-content">
        <template v-if="listType === 'projects'">
          <view v-for="project in projects" :key="project.id" class="my-list-project">
            <hope-projects :project="project" />
          </view>
          <uni-load-more v-if="projects?.length === 0" status="noMore" />
        </template>

        <template v-else-if="listType === 'activity'">
          <view v-for="item in activity" :key="item.id" class="activity-item">
            <hope-activity :activity="item" button-size="sm" info />
          </view>
          <uni-load-more v-if="activity?.length === 0" status="noMore" />
        </template>

        <template v-else-if="listType === 'dynamic'">
          <view class="dynamic-button">
            <hope-button title="创建动态" @on-click="() => goToPage(PagePath.CREATE_DYNAMIC)" />
          </view>
          <view v-for="item in dynamic" :key="item.id" class="dynamic-item">
            <hope-dynamic :dynamic="item" />
            <uni-load-more v-if="dynamic?.length === 0" status="noMore" />
          </view>
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.my-list {

  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden
  }

  &-scroll {
    &-container {
      flex: 1;
      overflow: scroll;
      background-color: $color-white;
      padding-inline: $padding-base;
    }

    &-content {
      height: 100%;
    }
  }

  &-title {
    height: 60rpx;
    line-height: 90rpx;
    font-size: 24rpx;
    text-align: center;
  }

  &-projects {
    height: 300rpx;
  }
}

.activity-item {
  height: 300rpx;
  margin-bottom: 30rpx;
}

.dynamic {
  &-item {
    margin-top: $padding-base;
  }

  &-button {
    padding-top: $padding-base;
  }
}
</style>
